<template>
  <div style="display: flex; flex-direction: column; flex: 1">
    <el-tabs class="tab-group-tabs"
             v-model="active"
             :stretch="false"
             tab-position="top"
             @tab-click="tabClick"
             @tab-remove="removeTab">
      <el-tab-pane class="route-tab-pane" :closable="pageList.length > 1" v-for="(page) in pageList"
                   :key="page.path" :name="page.path" :label="page.meta.title"
                   style="padding: 0;margin: 0;">
      </el-tab-pane>
    </el-tabs>
    <RouteView style="flex: 1; margin: 10px; border-radius: 4px; "/>
  </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from 'vue';
import router from "@/router";
import {useRoute} from "vue-router";
import {useStore} from "@/stores";
import {MENU_TYPE} from "@/stores/conf";
import RouteView from "@/components/common/RouteWrap.vue";

const active = ref();
const pageList: any = ref([]);
const route = useRoute();
const store = useStore();
const emits = defineEmits(['tabRouterChange']);

const onTabChanged = (path: string) => {
  emits('tabRouterChange', path);
}

const tabClick = (ctx: any) => {
  const index: number = parseInt(ctx.index);
  nextTick(() => onTabChanged(pageList.value[index].path));
}

const removeTab = (targetName: string) => {
  const tabs = pageList.value
  let activeName = active.value;

  if (tabs.length > 1) {
    let removePath: boolean = false;
    if (activeName === targetName) {
      tabs.forEach((tab: any, index: number) => {
        if (tab.path === targetName) {
          removePath = true;
          const nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.path
          }
        }
      })

      if (removePath) {
        pageList.value = tabs.filter((tab: any) => tab.path !== targetName);

        router.push({
          path: activeName
        })
      }
    }
  }
}

const addRoute = (currentRoute: any) => {
  if (currentRoute.meta.type === MENU_TYPE.MENU &&
      !currentRoute.meta.hideTab) {

    let exist: any;
    let currPath: string = currentRoute.path;

    if (currentRoute.meta.varPath) {
      exist = pageList.value.find((item: any) => currentRoute.path.indexOf(item.path) == 0);
      if (exist) {
        currPath = exist.path;
      }
    } else {
      exist = pageList.value.find((item: any) => item.path === currentRoute.path);
    }

    if (!exist) {
      pageList.value.push(currentRoute);
    }

    active.value = currPath;
    store.updateTopFirstRoute(currPath);
  }
}

watch(() => route.path, () => {
  addRoute(router.currentRoute.value);
  nextTick(() => {
    const params: any = router.currentRoute.value.query;
    if (params && params.removeRoute) {
      const tabs = pageList.value
      pageList.value = tabs.filter((tab: any) => tab.path !== params.removeRoute);
    }
    onTabChanged(route.path);
  })
})

onMounted(() => {
  addRoute(router.currentRoute.value);
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.tab-group-tabs {
  padding: 0;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.01);
  width: 100%;
}

.tab-group-tabs >>> .el-tabs__header {
  padding: 0 0 0 16px;
  margin: 0;
}

.tab-group-tabs >>> .el-tabs__content {
  padding: 0;
  margin: 0;
  height: 0;
}

.tab-group-tabs:deep(.el-tabs__nav-wrap::after) {
  height: 0 !important;
}

.tab-group-tabs:deep(.el-tabs__item.is-active) {
  font-weight: bold;
}

.tab-group-tabs:deep(.el-tabs__active-bar) {
  background-color: transparent !important;
}

.route-tab-pane {
  height: 0;
}

</style>
